<template>
  <div>
    <el-col :span="8">
      <el-card :body-style="{ padding: '0px' }" align="center" style="padding-top: 10px;">
        <div id="qrcode" ref="qrcode"></div>
        <div style="padding: 14px;">
          <span>手机扫描二维码预览</span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8" style="margin-left: 50px">
      <el-card :body-style="{ padding: '0px' }" align="center"
               style="padding: 10px;background: #efa22e;color: #fff;font-size: 16px;">
        <div style="padding: 14px;">
          <a target="_blank" :href="pcPreviewUrl"><span style="color:#fff ">点击PC网页预览</span></a>
        </div>
      </el-card>
    </el-col>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import api from "@/api/api";
  import axios from "axios/index";

  export default {
    name: 'content-preview',
    props: {
      contentId: {
        type: Number,
        default: '',
      },
    },
    data() {
      return {
        pcPreviewUrl: ''
      }
    },
    methods: {
      getQrCode(contentUrl) {
        let qrcode = new QRCode('qrcode', {
          width: 200, // 设置宽度，单位像素
          height: 200, // 设置高度，单位像素
          text: contentUrl // 设置二维码内容或跳转地址
        })
      },
      getPreviewAddress() {
        let url = this.$api.viewNewsGetPreviewAddress;
        axios.post(url, {contentId: this.contentId}).then(res => {
          if (res.code == '200') {
            let appPreviewUrl = res.body.appPreviewUrl;
            let pcPreviewUrl = res.body.pcPreviewUrl;
            this.pcPreviewUrl = pcPreviewUrl;
            if (this.$myUtils.isNull(appPreviewUrl)) {
              this.$message.error("未获取到预览路径");
            }
            this.getQrCode(appPreviewUrl);
          } else {
            this.$message.error(res.message);
          }
        })
      }
    },
    mounted() {
      this.getPreviewAddress();
    },
    created() {

    },
    updated() {
    }
  }
</script>
